<template>
  <view class="page-container">
    <!-- 页面头部 -->
    <PageHeader title="发布招聘信息" :showBack="true" />
    
    <!-- 导航栏 -->
    <view class="nav-tabs">
      <view 
        :class="['tab-item', activeTab === 0 ? 'active' : '']" 
        @click="activeTab = 0"
      >
        发布工厂招聘
      </view>
      <view 
        :class="['tab-item', activeTab === 1 ? 'active' : '']" 
        @click="activeTab = 1"
      >
        发布日结招聘
      </view>
    </view>
    
    <!-- 内容区域：根据导航切换显示对应组件 -->
    <view class="content-container">
      <!-- 工厂招聘组件 -->
      <FactoryRecruitment v-if="activeTab === 0" />
      
      <!-- 日结招聘组件 -->
      <DailyRecruitment v-if="activeTab === 1"/>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageHeader from '@/components/PageHeader.vue'
// 导入两个招聘组件
import FactoryRecruitment from './post-job-factory.vue'
import DailyRecruitment from './post-job-day.vue'
import { Button as nutButton } from '@nutui/nutui-taro'

// 导航状态：0=工厂招聘，1=日结招聘
const activeTab = ref(0)
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  width: 750rpx;
  margin: 0 auto;
}

/* 导航栏样式 */
.nav-tabs {
  display: flex;
  width: 100%;
  height: 90rpx;
  background-color: white;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  color: #666;
  position: relative;
  cursor: pointer;
}

.tab-item.active {
  color: #165dff;
  font-weight: bold;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4rpx;
  background-color: #165dff;
}

/* 内容容器 */
.content-container {
  padding: 32rpx;
  box-sizing: border-box;
}
</style>